<template>
  <div class="main">
    <ul>
      <li class="item" v-for="(item, index) in subjectList" :key="index">
        <button @click="add(item)" class="btn-add">加入试题车</button>
        <h4>{{index+1}}.[{{item.type|fmtSubjectType}}]{{item.name}}</h4>
        <div style="color:#888;font-size:14px;padding:10px 5px;">{{item.author}}-{{item.createTime}}</div>
        <fieldset style="padding:10px;" v-if="checkIsXZT(item.type)">
          <legend>选项</legend>
          <div
            style="padding:10px;"
            v-for="(option, i) in item.options"
            :key="i"
          >{{i|fmtOrder2ABC}}.{{option.val}}</div>
        </fieldset>
        <div v-if="checkIsNotJDT(item.type)">答案：{{item.answer}}</div>
        <div>
          解析：
          <button @click="item.isOpen=!item.isOpen">{{item.isOpen?"收起":"展开"}}</button>
          <div style="padding:5PX 10px" v-show="item.isOpen">{{item.desc}}</div>
        </div>
      </li>
    </ul>
    <router-link to="/cart" tag="div" class="subject-cart">试题车({{cartCount}})</router-link>>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";

let { mapMutations, mapState, mapGetters } = createNamespacedHelpers("subject");
export default {
  async created() {
    let { subjectList } = await this.$get("/subjectlist");
    this.setSubjectList(subjectList);
  },
  computed: {
    ...mapState(["subjectList"]),
    ...mapGetters(["cartCount"])
  },
  methods: {
    ...mapMutations(["setSubjectList", "add2Cart"]),
    // ...mapActions(['test']),
    add(item) {
      item.isSuccess = false;
      this.add2Cart(item);
      if (item.isSuccess) {
        this.$ms("添加成功");
      } else {
        this.$mw("请勿重复添加");
      }
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
$c: black;
.main {
  width: 500px;
  margin: 100px auto;
  border: 1px solid red;

  .item {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  .btn-add {
    position: absolute;
    right: 10px;
    top: 40px;
  }
}

.subject-cart {
  position: fixed;
  right: 0;
  width: 30px;
  padding: 10px;
  background: #0092e7;
  color: antiquewhite;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
</style>